<template>
  <el-container>
    <el-header>

    </el-header>
    <el-main>
      <el-table
        :data="map.list"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID"
          width="180">
        </el-table-column>
        <el-table-column
          label="公司职位"
          width="180">
          <template slot-scope="scope">
            <el-select v-model="scope.row.roleid">
              <el-option v-for="(vv,vk) in map.positionList" :key="vk" :value="vk" :label="vv"></el-option>
            </el-select>
          </template>

        </el-table-column>
        <el-table-column
          label="关联职位">
          <template slot-scope="scope">
            <el-select v-model="scope.row.mapid">
              <el-option v-for="(vv,vk) in map.positionList" :key="vk" :value="vk" :label="vv"></el-option>
            </el-select>
          </template>

        </el-table-column>

        <el-table-column
          prop="created_at"
          label="创建时间">
        </el-table-column>

        <el-table-column
          prop="updated_at"
          label="更新时间">
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">

            <div class="frow fcenter" style="align-items: flex-end;">
              <div><el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button></div>
              <div style="margin-left: 10px;"> <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button></div>
            </div>


          </template>
        </el-table-column>

      </el-table>

      <el-footer>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="form.page"
          :page-sizes="[10,20,30]"
          :page-size="form.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="map.total">
        </el-pagination>
      </el-footer>

    </el-main>
  </el-container>
</template>

<script>
  import {mapActions,mapState} from 'vuex'
    export default {
        name: "setPositionMapping",
        data(){
            return {
                form: {
                    page: 1,
                    pagesize: 10,
                },
                status_list: [],
                jobList: [],
            }
        },
        computed: {
            ...mapState("Setdata",["map"]),
        },
        methods: {
            ...mapActions("Setdata",["getPositionMappingListAction"]),
            //搜索
            onSubmit(){
                this.getPositionMappingListAction(this.form)
            },
            handleSizeChange(val){
                this.form.pagesize = val
                this.getPositionMappingListAction(this.form)
            },
            handleCurrentChange(val){
                this.form.page = val
                this.getPositionMappingListAction(this.form)
            },
            handleEdit(i,row){
                console.log(row.id)
            },

            handleDelete(i,row){

            }
        },

    }
</script>

<style scoped>

</style>
